<!DOCTYPE HTML>
<html lang="zxx">

	<head>
		<title>登录</title>
		<!-- Meta tag Keywords -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<meta charset="UTF-8" />
		<meta name="keywords"
			content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
		<script src="js/api.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./js/vant-UI/index.css"/>
		<script src="./js/vant-UI/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<!-- Meta tag Keywords -->

		<!-- css files -->
		<link rel="stylesheet" href="css/style2.css" type="text/css" media="all" />
		<!-- Style-CSS -->
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!-- Font-Awesome-Icons-CSS -->
		<!-- //css files -->
		<style type="text/css">
			.submit {
				width: 84%;
				text-align: center;
			}
			
		</style>
	</head>

	<body>
		<div class="main-bg" id="mian">
			<!-- title -->
			<h1>员工管理系统</h1>
			<!-- //title -->
			<div class="sub-main-w3">
				<div class="image-style" style="height: 357.4px;">

				</div>
				<!-- vertical tabs -->
				<div class="vertical-tab">
					<div id="section1" class="section-w3ls">
						<input type="radio" name="sections" id="option1" checked>
						<label for="option1" class="icon-left-w3pvt">
							<span class="fa fa-pencil-square" aria-hidden="true"></span>登录</label>
						<article style="height: 357.4px;">
							<form style="height: 357.4px;padding: 10px 20px;">
								<div style="height: 65%;">
									<h3 class="legend" style="margin-top: 20px;">账号登录</h3>
									<div class="input">
										<span class="fa fa-envelope-o" aria-hidden="true"></span>
										<input type="email" v-model="logindata.email" placeholder="邮箱" name="email"
											required />
									</div>
									<div class="input">
										<span class="fa fa-key" aria-hidden="true"></span>
										<input type="password" v-model="logindata.password" placeholder="密码" name="password"
											required />
									</div>
								</div>
								
								<div type="" class="btn submit" @click="login">登 录</div>
								
							</form>
						</article>
					</div>
					<div id="section2" class="section-w3ls">
						<input type="radio" name="sections" id="option2">
						<label for="option2" class="icon-left-w3pvt">
							<span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
						<article style="height: 357.4px;">
							<form style="height: 357.4px;padding: 10px 20px;">
								<div style="height: 65%;">
									<h3 class="legend" style="margin-top: 20px;">账号注册</h3>
									<div class="input">
										<span class="fa fa-envelope-o" aria-hidden="true"></span>
										<input type="text" v-model="registerdata.email" placeholder="邮箱" name="email"
											required />
									</div>
									<div class="input">
										<span class="fa fa-key" aria-hidden="true"></span>
										<input type="password" v-model="registerdata.password" placeholder="密码" name="password"required />
									</div>
									<div class="input">
										<span class="fa fa-key" aria-hidden="true"></span>
										<input type="password" v-model="registerdata.confirmPassword" placeholder="确认密码" name="password"required />
									</div>
								</div>
								
								<div class="btn submit" @click="register">注 册</div>
							</form>
						</article>
					</div>
					<div id="section3" class="section-w3ls">
						<input type="radio" name="sections" id="option3">
						<label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock"
								aria-hidden="true"></span>忘记密码?</label>
						<article style="height: 357.4px;">
							<form style="height: 357.4px;padding: 10px 20px;">
								<h3 class="legend last" style="margin-top: 20px;">重置密码</h3>
								<p class="para-style">请在下面输入您的电子邮件地址，我们将给您发送一封带有说明的电子邮件。</p>
								<p class="para-style-2"><strong>需要帮助?</strong>了解更多关于如何 <a href="#">#</a></p>
								<div class="input">
									<span class="fa fa-envelope-o" aria-hidden="true"></span>
									<input type="email" v-model="forgetdata.email" placeholder="邮箱" name="email"
										required />
								</div>
								<button type="submit" class="btn submit last-btn">提交</button>
							</form>
						</article>
					</div>
				</div>
				<!-- //vertical tabs -->
				<div class="clear"></div>
			</div>
		</div>

	</body>
	<!-- script   -->
	
	<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
	<script>
		new Vue({
			el: '#mian',
			data: {
				nowYear: new Date().getFullYear(),
				logindata: {
					email: "",
					password: ""
				},
				registerdata: {
					email: "",
					password: "",
					confirmPassword: "",
				},
				forgetdata: {
					email: "",
				},
				value: 3,
				lv:0,
			},
			methods:{
				//登录
				login(){
					var that = this
					if(that.logindata.email == ''){
						vant.Toast("邮箱不能为空")
						return
					}
					if(that.logindata.password == ''){
						vant.Toast("密码不能为空")
						return
					}
					var url = "http://localhost:8089" + "/user/login"
					var data1 = {
						"email": this.logindata.email,
						"password": this.logindata.password,
					}
					$.ajax({
						cache: false,
						url: url,
						type: 'post',
						data: data1,
						dataType: 'JSON',
						traditional: true,
						success: function(arg) {
							
							console.log(arg)
							if(arg.code == 200){
								sessionStorage.setItem("data",arg.data.email)
								console.log(arg.data.email)
								console.log("登陆成功")
								window.localStorage.token = "203267340"
								if(arg.data.authority == "admin"){
									window.location.href="manager.html"
									sessionStorage.setItem("authority","admin")
								}
								if(arg.data.authority == "user"){
									window.location.href="staff.html"
									sessionStorage.setItem("authority","user")
								}
							}
							if(arg.code == 500){
								console.log("登陆失败")
								vant.Toast("用户名或密码错误")
							}
							
						},
						error: function() {
							console.log("失败")
						}
					})
					// 走接口
					// if(this.logindata.email == "2890682240@qq.com" && this.logindata.password == "123456"){
					// 	alert("登陆成功")
					// 	window.localStorage.token = "203267340"
					// 	window.location.href="index.html?lv=0"
					// }else{
					// 	alert("用户名或密码错误")
					// }
				},
				getUserInfo() {
					var that = this
					var url = "http://localhost:8089" + "/user/login"
					var data1 = {
						"email": this.logindata.email,
						"password": this.logindata.password,
					}
					$.ajax({
						cache: false,
						url: url,
						type: 'post',
						data: data1,
						dataType: 'JSON',
						traditional: true,
						success: function(arg) {
							console.log(arg)
							
						},
						error: function() {
							console.log("失败")
						}
					})
				},
				//注册
				register(){
					var that = this
					if(that.registerdata.email == ''){
						vant.Toast("邮箱不能为空")
						return
					}
					if(that.registerdata.password == ''){
						vant.Toast("密码不能为空")
						return
					}
					if(that.registerdata.password != that.registerdata.confirmPassword){
						vant.Toast("两次密码不一致")
						return
					}
					var url = "http://localhost:8089" + "/user/register"
					var data1 = {
						email: that.registerdata.email,
						password: that.registerdata.password,
					}
					$.ajax({
						cache: false,
						url: url,
						type: 'post',
						data: data1,
						dataType: 'JSON',
						traditional: true,
						success: function(arg) {
							console.log(arg)
							if(arg.code == 200){
								console.log("注册成功")
								vant.Toast("注册成功，请登录")
								
							}
							if(arg.code == 500){
								console.log("注册失败")
								vant.Toast("邮箱已注册")
							}
						},
						error: function() {
							console.log("失败")
							// Vant.Toast("111")
						}
					})
				}
			},
			mounted() {
				vant.Toast("欢迎登录员工管理系统")
			}
		});
	</script>
	<!-- //script -->

</html>
